<template>
  <t-layout-page class="dashboard-container">
    <!-- github角标 -->
    <github-corner class="github-corner" />
    <t-layout-page-item>
      <!-- 用户信息 -->
      <div class="mb-8">
        <el-card class="w-full">
          <div class="flex-box flex-between flex-wrap">
            <div class="flex-box flex-ver-v">
              <img class="user-avatar" src="@/assets/logo/logo.png" />
              <span class="ml-[10px] text-[16px]" style="margin-left: 5px">
                {{ username || "wocwin" }}
              </span>
            </div>
            <div class="space-x-2 flex-box flex-ver-v">
              <el-divider direction="vertical" />
              <el-link target="_blank" type="success" href="https://gitee.com/wocwin/wocwin-admin">Gitee源码</el-link>
              <el-divider direction="vertical" />
              <el-link target="_blank" type="primary" href="https://github.com/wocwin/wocwin-admin">GitHub源码 </el-link>
            </div>
          </div>
        </el-card>
      </div>
    </t-layout-page-item>
    <t-layout-page-item>
      <!-- Echarts 图表 -->
      <el-row :gutter="40">
        <el-col :sm="24" :lg="8" class="mb-4">
          <BarChart id="barChart" height="400px" width="100%" class="bg-[var(--el-bg-color-overlay)]" />
        </el-col>

        <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
          <PieChart id="pieChart" height="400px" width="100%" class="bg-[var(--el-bg-color-overlay)]" />
        </el-col>

        <el-col :xs="24" :sm="12" :lg="8" class="mb-4">
          <RadarChart id="radarChart" height="400px" width="100%" class="bg-[var(--el-bg-color-overlay)]" />
        </el-col>
      </el-row>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script setup lang="ts" name="Dashboard">
import { useUserStore } from "@/store/modules/user";

import GithubCorner from "./components/GithubCorner.vue";
import BarChart from "./components/BarChart.vue";
import PieChart from "./components/PieChart.vue";
import RadarChart from "./components/RadarChart.vue";

const userStore = useUserStore();
const username = computed(() => userStore.name);
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .w-full {
    width: 100%;
  }
  .github-corner {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 99;
    border: 0;
  }

  .data-box {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    font-weight: bold;
    color: var(--el-text-color-regular);
    background: var(--el-bg-color-overlay);
    border-color: var(--el-border-color);
    box-shadow: var(--el-box-shadow-dark);
  }

  .svg-icon {
    fill: currentcolor !important;
  }
}
</style>
